<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放终端</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-hover: #3a56d4;
            --text-color: #333;
            --bg-color: #fff;
            --player-bg: #2b2d42;
            --control-bg: rgba(0, 0, 0, 0.7);
            --progress-color: #4cc9f0;
            --time-color: #adb5bd;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
        }
        
        body {
            background-color: var(--bg-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            color: var(--text-color);
        }
        
        .player-wrapper {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .player-wrapper:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }
        
        .video-container {
            width: 100%;
            position: relative;
            padding-top: 56.25%; 
            background-color: #000;
        }
        
        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            outline: none;
        }
        
        .controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--control-bg);
            padding: 12px 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            z-index: 10;
        }

        .player-wrapper:hover .controls,
        .player-wrapper:focus-within .controls {
            transform: translateY(0);
        }
        
        .progress-container {
            width: 100%;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--progress-color);
            border-radius: 3px;
            width: 0%;
            position: relative;
            transition: width 0.1s linear;
        }
        
        .progress-bar::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .progress-container:hover .progress-bar::after {
            opacity: 1;
        }
        
        .preview-container {
            position: absolute;
            bottom: 10px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            z-index: 20;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .preview-image {
            width: 240px;
            height: 135px;
            display: block;
        }
        
        .preview-time {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 5px;
            font-size: 12px;
            text-align: center;
        }
        
        .buttons-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .left-controls, .right-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .control-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        .control-btn:active {
            transform: scale(0.95);
        }
        
        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100px;
            transition: width 0.3s;
        }
        
        .volume-slider {
            width: 0;
            height: 4px;
            -webkit-appearance: none;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
            outline: none;
            opacity: 0;
            transition: all 0.3s;
        }

        .volume-container:hover .volume-slider {
            width: 80px;
            opacity: 1;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .time {
            color: var(--time-color);
            font-size: 13px;
            font-family: monospace;
            text-align: center;
        }
        
        .video-title {
            position: absolute;
            top: 15px;
            left: 15px;
            color: white;
            font-size: 16px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            z-index: 5;
            opacity: 0;
            transition: opacity 0.3s;
            max-width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-wrapper:hover .video-title {
            opacity: 1;
        }

        .loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: var(--progress-color);
            animation: spin 1s ease-in-out infinite;
            opacity: 0;
            z-index: 2;
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* 播放速度选择器样式 */
        .speed-selector {
            position: relative;
        }

        .speed-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            padding: 6px 12px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .speed-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .speed-dropdown {
            position: absolute;
            bottom: 100%;
            right: 0;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 4px;
            padding: 8px 0;
            margin-bottom: 8px;
            min-width: 80px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
            z-index: 100;
            display: none;
        }

        .speed-dropdown.show {
            display: block;
        }

        .speed-option {
            color: white;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            padding: 6px 16px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }

        .speed-option:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .speed-option.active {
            background: var(--primary-color);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .controls {
                transform: translateY(0);
                padding: 10px;
            }

            .volume-slider {
                width: 60px;
                opacity: 1;
            }

            .volume-container:hover .volume-slider {
                width: 60px;
            }

            .video-title {
                opacity: 1;
                font-size: 14px;
            }
            
            .preview-image {
                width: 160px;
                height: 90px;
            }
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #121212;
                --text-color: #e0e0e0;
                --player-bg: #1e1e1e;
                --time-color: #757575;
            }
        }
    </style>
</head>
<body>
    <div class="player-wrapper" tabindex="0">
        <div class="video-container">
            <div class="loading-spinner" id="loadingSpinner"></div>
            <div class="video-title" id="videoTitle"></div>
            <video id="videoPlayer"></video>
            
            <div class="controls">
                <div class="progress-container" id="progressContainer">
                    <div class="progress-bar" id="progressBar"></div>
                    <div class="preview-container" id="previewContainer">
                        <img src="" alt="视频预览" class="preview-image" id="previewImage">
                        <div class="preview-time" id="previewTime">00:00</div>
                    </div>
                </div>
                
                <div class="buttons-container">
                    <div class="left-controls">
                        <button class="control-btn" id="playBtn" aria-label="播放/暂停">
                            <i class="fas fa-play" id="playIcon"></i>
                        </button>
                        <button class="control-btn" id="muteBtn" aria-label="静音">
                            <i class="fas fa-volume-up" id="volumeIcon"></i>
                        </button>
                        <div class="volume-container">
                            <input type="range" class="volume-slider" id="volumeSlider" 
                                   min="0" max="1" step="0.01" value="1" aria-label="音量">
                        </div>
                        <span class="time" id="currentTime">00:00</span>
                        <span class="time">/</span>
                        <span class="time" id="duration">00:00</span>
                    </div>
                    
                    <div class="right-controls">
                        <!-- 选择视频按钮 -->
                        <button class="control-btn" id="selectVideoBtn" aria-label="选择视频">
                            <i class="fas fa-folder-open"></i>
                        </button>
                        <button class="control-btn" id="clearBtn" aria-label="清空视频">
                            <i class="fas fa-trash"></i>
                        </button>
                        
                        <!-- 播放速度选择器 -->
                        <div class="speed-selector" id="speedSelector">
                            <button class="speed-btn" id="speedBtn" aria-label="播放速度">
                                <span>1x</span>
                                <i class="fas fa-chevron-down"></i>
                            </button>
                            <div class="speed-dropdown" id="speedDropdown">
                                <button class="speed-option" data-speed="0.5">0.5x</button>
                                <button class="speed-option" data-speed="0.75">0.75x</button>
                                <button class="speed-option active" data-speed="1">1x</button>
                                <button class="speed-option" data-speed="1.25">1.25x</button>
                                <button class="speed-option" data-speed="2">2x</button>
                                <button class="speed-option" data-speed="4">4x</button>
                                <button class="speed-option" data-speed="8">8x</button>
                                <button class="speed-option" data-speed="16">16x</button>
                            </div>
                        </div>
                        
                        <button class="control-btn" id="fullscreenBtn" aria-label="全屏">
                            <i class="fas fa-expand"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 隐藏的视频和画布，用于捕获预览帧 -->
    <video id="previewVideo" style="display: none;"></video>
    <canvas id="previewCanvas" style="display: none;"></canvas>
    
    <!-- 隐藏的文件输入控件 -->
    <input type="file" id="fileInput" accept="video/*" style="display: none;">
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const video = document.getElementById('videoPlayer');
            const playBtn = document.getElementById('playBtn');
            const playIcon = document.getElementById('playIcon');
            const muteBtn = document.getElementById('muteBtn');
            const volumeIcon = document.getElementById('volumeIcon');
            const volumeSlider = document.getElementById('volumeSlider');
            const progressBar = document.getElementById('progressBar');
            const progressContainer = document.getElementById('progressContainer');
            const currentTimeElement = document.getElementById('currentTime');
            const durationElement = document.getElementById('duration');
            const speedBtn = document.getElementById('speedBtn');
            const speedSelector = document.getElementById('speedSelector');
            const speedDropdown = document.getElementById('speedDropdown');
            const speedOptions = document.querySelectorAll('.speed-option');
            const fullscreenBtn = document.getElementById('fullscreenBtn');
            const clearBtn = document.getElementById('clearBtn');
            const selectVideoBtn = document.getElementById('selectVideoBtn');
            const fileInput = document.getElementById('fileInput');
            const videoTitle = document.getElementById('videoTitle');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const playerWrapper = document.querySelector('.player-wrapper');
            
            // 预览相关元素
            const previewContainer = document.getElementById('previewContainer');
            const previewImage = document.getElementById('previewImage');
            const previewTime = document.getElementById('previewTime');
            const previewVideo = document.getElementById('previewVideo');
            const previewCanvas = document.getElementById('previewCanvas');
            const canvasCtx = previewCanvas.getContext('2d');
            
            // 初始化视频状态
            let isDraggingProgress = false;
            let videoSourceObject = null;
            let previewSourceObject = null;
            let previewCache = new Map(); // 缓存预览帧，避免重复生成
            let lastPreviewTime = -1;
            let isDropdownOpen = false;
            
            // 控制栏选择视频按钮点击事件 - 触发文件选择对话框
            selectVideoBtn.addEventListener('click', function() {
                fileInput.click();
            });
            
            // 选择本地视频文件
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    loadVideoFile(file);
                }
            });
            
            // 加载视频文件的函数
            function loadVideoFile(file) {
                // 如果之前有视频源，先释放
                if (videoSourceObject) {
                    URL.revokeObjectURL(videoSourceObject);
                }
                if (previewSourceObject) {
                    URL.revokeObjectURL(previewSourceObject);
                }
                
                // 清空预览缓存
                previewCache.clear();
                
                // 显示文件名
                videoTitle.textContent = file.name;
                
                // 显示加载动画
                loadingSpinner.style.opacity = '1';
                
                videoSourceObject = URL.createObjectURL(file);
                video.src = videoSourceObject;
                
                // 为预览创建另一个视频源
                previewSourceObject = URL.createObjectURL(file);
                previewVideo.src = previewSourceObject;
                
                video.addEventListener('loadeddata', function onLoadedData() {
                    loadingSpinner.style.opacity = '0';
                    video.play().then(() => {
                        playIcon.className = 'fas fa-pause';
                    }).catch(err => {
                        console.log('自动播放失败:', err);
                    });
                    // 移除事件监听器，避免重复调用
                    video.removeEventListener('loadeddata', onLoadedData);
                });
            }
            
            // 清空视频功能
            clearBtn.addEventListener('click', clearVideo);
            
            function clearVideo() {
                // 暂停视频播放
                video.pause();
                previewVideo.pause();
                
                // 重置播放图标
                playIcon.className = 'fas fa-play';
                
                // 清除视频源
                if (videoSourceObject) {
                    URL.revokeObjectURL(videoSourceObject);
                    videoSourceObject = null;
                }
                if (previewSourceObject) {
                    URL.revokeObjectURL(previewSourceObject);
                    previewSourceObject = null;
                }
                
                // 清空预览缓存
                previewCache.clear();
                
                // 重置视频元素
                video.src = '';
                previewVideo.src = '';
                
                // 清空视频标题
                videoTitle.textContent = '';
                
                // 重置进度条和时间显示
                progressBar.style.width = '0%';
                currentTimeElement.textContent = '00:00';
                durationElement.textContent = '00:00';
                
                // 隐藏预览窗口
                previewContainer.style.opacity = '0';
                
                // 重置音量
                video.volume = 1;
                volumeSlider.value = 1;
                video.muted = false;
                updateVolumeIcon();
                
                // 重置播放速度
                setPlaybackSpeed(1);
                
                // 隐藏加载动画
                loadingSpinner.style.opacity = '0';
                
                // 重置文件输入
                fileInput.value = '';
            }
            
            // 播放/暂停按钮功能
            playBtn.addEventListener('click', togglePlay);
            video.addEventListener('click', togglePlay);
            
            function togglePlay() {
                if (video.paused || video.ended) {
                    video.play();
                    playIcon.className = 'fas fa-pause';
                } else {
                    video.pause();
                    playIcon.className = 'fas fa-play';
                }
            }
            
            // 静音按钮功能
            muteBtn.addEventListener('click', toggleMute);
            
            function toggleMute() {
                video.muted = !video.muted;
                updateVolumeIcon();
            }
            
            function updateVolumeIcon() {
                if (video.muted || video.volume === 0) {
                    volumeIcon.className = 'fas fa-volume-mute';
                    volumeSlider.value = 0;
                } else {
                    volumeIcon.className = video.volume > 0.5 ? 'fas fa-volume-up' : 'fas fa-volume-down';
                    volumeSlider.value = video.volume;
                }
            }
            
            // 音量控制
            volumeSlider.addEventListener('input', function() {
                video.volume = this.value;
                video.muted = this.value === '0';
                updateVolumeIcon();
            });
            
            // 进度条控制
            progressContainer.addEventListener('mousedown', startDragProgress);
            progressContainer.addEventListener('mousemove', handleProgressHover);
            progressContainer.addEventListener('mouseup', endDragProgress);
            progressContainer.addEventListener('mouseleave', hidePreview);
            progressContainer.addEventListener('click', seekVideo);
            
            function startDragProgress(e) {
                isDraggingProgress = true;
                handleProgressHover(e);
                seekVideo(e);
            }
            
            function handleProgressHover(e) {
                if (!video.duration || video.duration <= 0) return;
                
                const rect = progressContainer.getBoundingClientRect();
                const pos = (e.clientX - rect.left) / rect.width;
                const hoverTime = pos * video.duration;
                
                // 计算预览窗口位置
                const containerWidth = rect.width;
                const previewWidth = previewContainer.offsetWidth || 240;
                let leftPos = (e.clientX - rect.left) - (previewWidth / 2);
                
                // 确保预览窗口不超出容器范围
                if (leftPos < 0) leftPos = 0;
                if (leftPos + previewWidth > containerWidth) {
                    leftPos = containerWidth - previewWidth;
                }
                
                // 更新预览窗口位置
                previewContainer.style.left = `${leftPos}px`;
                
                // 更新预览时间文本
                previewTime.textContent = formatTime(hoverTime);
                
                // 生成或获取预览图像（限制更新频率以提高性能）
                if (Math.abs(hoverTime - lastPreviewTime) > 0.5) {
                    lastPreviewTime = hoverTime;
                    showPreview(hoverTime);
                }
                
                // 显示预览窗口
                previewContainer.style.opacity = '1';
            }
            
            function endDragProgress() {
                isDraggingProgress = false;
            }
            
            function hidePreview() {
                if (!isDraggingProgress) {
                    previewContainer.style.opacity = '0';
                }
            }
            
            function seekVideo(e) {
                if (!isDraggingProgress && e.type !== 'click') return;
                
                const rect = progressContainer.getBoundingClientRect();
                const pos = (e.clientX - rect.left) / rect.width;
                video.currentTime = pos * video.duration;
            }
            
            // 显示预览图像
            function showPreview(time) {
                // 检查缓存中是否已有该时间点的预览
                const cacheKey = Math.floor(time); // 按秒缓存，减少计算量
                if (previewCache.has(cacheKey)) {
                    previewImage.src = previewCache.get(cacheKey);
                    return;
                }
                
                // 设置预览视频的时间点
                previewVideo.currentTime = time;
                
                // 当预览视频准备好时捕获帧
                const captureFrame = () => {
                    // 设置画布尺寸
                    previewCanvas.width = 480; // 更高分辨率用于缓存
                    previewCanvas.height = 270;
                    
                    // 绘制当前帧到画布
                    canvasCtx.drawImage(previewVideo, 0, 0, previewCanvas.width, previewCanvas.height);
                    
                    // 将画布内容转换为图像URL
                    const imageUrl = previewCanvas.toDataURL('image/jpeg', 0.8);
                    
                    // 更新预览图像并缓存
                    previewImage.src = imageUrl;
                    previewCache.set(cacheKey, imageUrl);
                    
                    // 移除事件监听器
                    previewVideo.removeEventListener('seeked', captureFrame);
                };
                
                // 监听视频准备好的事件
                previewVideo.addEventListener('seeked', captureFrame);
            }
            
            // 更新进度条和时间显示
            video.addEventListener('timeupdate', updateProgress);
            
            function updateProgress() {
                if (isDraggingProgress) return;
                
                const percent = (video.currentTime / video.duration) * 100;
                progressBar.style.width = `${percent}%`;
                
                currentTimeElement.textContent = formatTime(video.currentTime);
                
                // 如果视频已加载，显示总时长
                if (!isNaN(video.duration)) {
                    durationElement.textContent = formatTime(video.duration);
                }
            }
            
            function formatTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
            }
            
            // 播放速度控制
            speedBtn.addEventListener('click', toggleSpeedDropdown);
            
            function toggleSpeedDropdown() {
                isDropdownOpen = !isDropdownOpen;
                speedDropdown.classList.toggle('show', isDropdownOpen);
                
                // 如果打开了下拉菜单，添加点击外部关闭的事件监听
                if (isDropdownOpen) {
                    document.addEventListener('click', closeSpeedDropdownOnOutsideClick);
                } else {
                    document.removeEventListener('click', closeSpeedDropdownOnOutsideClick);
                }
            }
            
            function closeSpeedDropdownOnOutsideClick(event) {
                if (!speedSelector.contains(event.target)) {
                    speedDropdown.classList.remove('show');
                    isDropdownOpen = false;
                    document.removeEventListener('click', closeSpeedDropdownOnOutsideClick);
                }
            }
            
            // 为每个速度选项添加点击事件
            speedOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const speed = parseFloat(this.getAttribute('data-speed'));
                    setPlaybackSpeed(speed);
                    
                    // 关闭下拉菜单
                    speedDropdown.classList.remove('show');
                    isDropdownOpen = false;
                    document.removeEventListener('click', closeSpeedDropdownOnOutsideClick);
                });
            });
            
            // 设置播放速度并更新UI
            function setPlaybackSpeed(speed) {
                video.playbackRate = speed;
                speedBtn.querySelector('span').textContent = `${speed}x`;
                
                // 更新选中状态
                speedOptions.forEach(option => {
                    const optionSpeed = parseFloat(option.getAttribute('data-speed'));
                    if (optionSpeed === speed) {
                        option.classList.add('active');
                    } else {
                        option.classList.remove('active');
                    }
                });
            }
            
            // 全屏功能
            fullscreenBtn.addEventListener('click', toggleFullscreen);
            playerWrapper.addEventListener('dblclick', toggleFullscreen);
            
            function toggleFullscreen() {
                if (!document.fullscreenElement) {
                    playerWrapper.requestFullscreen().catch(err => {
                        console.log(`全屏错误: ${err.message}`);
                    });
                    fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
                } else {
                    document.exitFullscreen();
                    fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
                }
            }
            
            // 监听全屏变化
            document.addEventListener('fullscreenchange', updateFullscreenButton);
            
            function updateFullscreenButton() {
                if (document.fullscreenElement) {
                    fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
                } else {
                    fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
                }
            }
            
            // 视频状态变化
            video.addEventListener('play', function() {
                playIcon.className = 'fas fa-pause';
            });
            
            video.addEventListener('pause', function() {
                playIcon.className = 'fas fa-play';
            });
            
            video.addEventListener('ended', function() {
                playIcon.className = 'fas fa-play';
                progressBar.style.width = '0%';
                currentTimeElement.textContent = '00:00';
            });
            
            video.addEventListener('volumechange', updateVolumeIcon);
            
            // 初始加载时显示视频时长
            video.addEventListener('loadedmetadata', function() {
                if (!isNaN(video.duration)) {
                    durationElement.textContent = formatTime(video.duration);
                }
            });

            // 加载状态处理
            video.addEventListener('waiting', function() {
                loadingSpinner.style.opacity = '1';
            });

            video.addEventListener('playing', function() {
                loadingSpinner.style.opacity = '0';
            });

            // 键盘快捷键
            document.addEventListener('keydown', function(e) {
                if (!document.fullscreenElement) return;
                
                switch (e.key) {
                    case ' ':
                        e.preventDefault();
                        togglePlay();
                        break;
                    case 'ArrowLeft':
                        e.preventDefault();
                        video.currentTime = Math.max(0, video.currentTime - 5);
                        break;
                    case 'ArrowRight':
                        e.preventDefault();
                        video.currentTime = Math.min(video.duration, video.currentTime + 5);
                        break;
                    case 'ArrowUp':
                        e.preventDefault();
                        video.volume = Math.min(1, video.volume + 0.1);
                        volumeSlider.value = video.volume;
                        updateVolumeIcon();
                        break;
                    case 'ArrowDown':
                        e.preventDefault();
                        video.volume = Math.max(0, video.volume - 0.1);
                        volumeSlider.value = video.volume;
                        updateVolumeIcon();
                        break;
                    case 'm':
                        e.preventDefault();
                        toggleMute();
                        break;
                    case 'f':
                        e.preventDefault();
                        toggleFullscreen();
                        break;
                    case 'c':
                        e.preventDefault();
                        clearVideo();
                        break;
                    case 'o':
                        e.preventDefault();
                        fileInput.click();
                        break;
                }
            });
        });
    </script>
</body>
</html>